<template>
	<view class="container">
		<!-- 会员状态卡片 -->
		<view class="vip-card" :class="{ active: vipInfo.is_vip }">
			<view class="card-header">
				<text class="vip-title">{{ vipInfo.is_vip ? 'VIP会员' : '普通用户' }}</text>
				<text class="vip-tag" v-if="vipInfo.is_vip">{{ vipInfo.vip_type_display }}</text>
			</view>
			<view class="card-content">
				<view class="info-item">
					<text class="label">会员状态</text>
					<text class="value">{{ vipInfo.is_vip ? '已开通' : '未开通' }}</text>
				</view>
				<view class="info-item" v-if="vipInfo.is_vip">
					<text class="label">开通时间</text>
					<text class="value">{{ formatDate(vipInfo.start_time) }}</text>
				</view>
				<view class="info-item" v-if="vipInfo.is_vip">
					<text class="label">到期时间</text>
					<text class="value">{{ formatDate(vipInfo.end_time) }}</text>
				</view>
			</view>
		</view>

		<!-- 会员权益 -->
		<view class="benefits-section">
			<view class="section-title">会员权益</view>
			<view class="benefits-list">
				<view class="benefit-item">
					<text class="icon">🎯</text>
					<text class="text">无限次配音</text>
				</view>
				<view class="benefit-item">
					<text class="icon">🎨</text>
					<text class="text">专业音色</text>
				</view>
				<view class="benefit-item">
					<text class="icon">💎</text>
					<text class="text">无广告</text>
				</view>
				<view class="benefit-item">
					<text class="icon">⚡</text>
					<text class="text">优先合成</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<!-- <button class="primary-btn" @tap="handleBuyVip" v-if="!vipInfo.is_vip">立即开通</button>
			<button class="secondary-btn" @tap="handleRenew" v-else>续费会员</button> -->
			<button class="secondary-btn" @tap="sendMessage" open-type="contact">联系客服</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import config from '@/config'
import { sendCustomerServiceMessage } from '@/services/auth'
const vipInfo = ref({
	is_vip: false,
	vip_type: null,
	vip_type_display: null,
	start_time: null,
	end_time: null
})

// 发送消息
function sendMessage() {
	sendCustomerServiceMessage({
		content: '你好，我想咨询一下配音服务'
	})
}
// 获取会员信息
async function fetchVipInfo() {
	try {
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}
		
		const result = await uni.request({
			url: `${config.apiBaseUrl}/api/vip/info`,
			method: 'GET',
			header: {
				'Authorization': token
			}
		})
		
		if (result.statusCode !== 200 || result.data.code !== 200) {
			throw new Error(result.data.message || '获取会员信息失败')
		}
		
		vipInfo.value = result.data.data
	} catch (error) {
		console.error('获取会员信息失败:', error)
		uni.showToast({
			title: error.message || '获取会员信息失败',
			icon: 'none'
		})
	}
}

// 格式化日期
function formatDate(dateStr) {
	if (!dateStr) return '--'
	const date = new Date(dateStr)
	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 购买会员
function handleBuyVip() {
	uni.navigateTo({
		url: '/pages/vip/index'
	})
}

// 续费会员
function handleRenew() {
	uni.navigateTo({
		url: '/pages/vip/index'
	})
}

onMounted(() => {
	fetchVipInfo()
})
</script>

<style lang="scss">
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: #f8f8f8;
}

.vip-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	
	&.active {
		background: linear-gradient(135deg, #35ae91, #2d8f76);
		
		.vip-title, .label, .value {
			color: #fff;
		}
		
		.vip-tag {
			background: rgba(255, 255, 255, 0.2);
			color: #fff;
		}
	}
}

.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.vip-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-right: 20rpx;
	}
	
	.vip-tag {
		font-size: 24rpx;
		color: #35ae91;
		background: rgba(53, 174, 145, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}
}

.card-content {
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			font-size: 28rpx;
			color: #666;
		}
		
		.value {
			font-size: 28rpx;
			color: #333;
		}
	}
}

.benefits-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
}

.benefits-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30rpx;
	
	.benefit-item {
		display: flex;
		align-items: center;
		background: #f8f8f8;
		padding: 20rpx;
		border-radius: 12rpx;
		
		.icon {
			font-size: 36rpx;
			margin-right: 16rpx;
		}
		
		.text {
			font-size: 28rpx;
			color: #333;
		}
	}
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: #fff;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
	
	.primary-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #35ae91;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		border: none;
		
		&:active {
			opacity: 0.9;
		}
	}
	
	.secondary-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #fff;
		color: #35ae91;
		font-size: 32rpx;
		border-radius: 44rpx;
		border: 2rpx solid #35ae91;
		
		&:active {
			opacity: 0.9;
		}
	}
}
</style> 